<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>行为样式设置</title>
<script type="text/javascript" src="../docs-1.2.6/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../docs-1.2.6/js/template.min.js"></script>
<script type="text/javascript" src="../docs-1.2.6/js/extgrid/jquery.extGrid.js"></script>
<script type="text/javascript" src="../docs-1.2.6/js/extgrid/jquery.extGrid.responsive.js"></script>

<link rel="stylesheet" type="text/css" href="../docs-1.2.6/js/extgrid/themes/default/skin.css">
</head>
<body>
<h4>行为样式设置</h4>
<style type="text/css">
.extgrid-row-single {  background: #F8F8F8; }

.r-border {
border-color: #ccc;
  border-width: 0 1px 1px 0;
  border-style: dotted;
}

</style>
<div style="width:100%; height:400px; overflow:hidden;" id="extgrid">
	<table>
	<tr>
		<th field='ck' align="center"></th>
		<th field='username' align="center">用户名</th>
		<th field='alias' align="center">别名</th>
		<th class='non-border'>
			<table cellpadding="0" cellspacing="0">
				<tr>
					<th colspan="3" class='r-border' align="center">基本信息</th>
				</tr>
				<tr>
					<th field="gender" align="center">性别</th>
					<th  field="age" align="center">年龄</th>
					<th field="birthday" align="center">生日</th>
				</tr>
			</table>
		</th>
		<th  field='country' align="center">国家</th>
		<th class='non-border'>
			<table cellpadding="0" cellspacing="0">
				<tr>
					<th colspan="3" class='r-border' align="center">其他</th>
				</tr>
				<tr>
					<th field="delete" align="center">删除</th>
					<th  field="edit" align="center">修改</th>
					<th field="disabled" align="center">冻结</th>
				</tr>
			</table>
		</th>
	</tr>
	</table>
</div>
<script type="text/javascript">
var getData = function(){
	var len = 300;
	var data = [];
	for( var i=0;i<len;i++ ) {
		data.push({
			id : i+1,
			username : '张三'+i,
			alias : '小明',
			gender : i%5,
			age : i%90,
			birthday : '2012-08-09',
			tel : 13124587451,
			country : '地球',
			address : '地球村',
			qq : 123456,
			hobby : '随便',
			'delete' : '删除',
			edit : '编辑',
			disabled : '冻结'
		});
	}
	return data;
}
var columns = [
					{field:'username',title:'用户名',width:'20%'},
					{field:'alias',title:'别名',width:'15%'},
					{field:'gender',title:'性别',width:'15%',bcls:'weight',reader:{0:'伪娘',1:'男',2:'女',_default_:'外星人'}},
					{field:'age',title:'年龄',width:'15%'},
					{field:'birthday',title:'生日',width:'20%'}
				];
var datas = getData();		
var grid;	
$(function(){
	grid = $("#extgrid").extgrid({
		//columns:columns,
		rowNumbersWidth:40,
		checkBox : true,
		// url : 'abc',
		headerTpl : $("#extgrid table tbody:first").html(),
		pageSize : 300,
		minWidth : 450,
		data : datas,
		onColumnMoving : function(t,field,toField){
			if( this.inArray( field,['gender','age','birthday'] ) != -1 ) {
				if( this.inArray( toField,['gender','age','birthday'] ) == -1 ) {
					t.addClass('grid-locked-error');
					return false;
				}
			}
			if( this.inArray( field,['delete','edit','disabled'] ) != -1 ) {
				if( this.inArray( toField,['delete','edit','disabled'] ) == -1 ) {
					t.addClass('grid-locked-error');
					return false;
				}
			}
			
			if( this.inArray( field,['gender','age','birthday','delete','edit','disabled'] ) == -1 ) {
				if( this.inArray( toField,['gender','age','birthday','delete','edit','disabled'] ) != -1 ) {
					t.addClass('grid-locked-error');
					return false;
				}
			}
			t.removeClass('grid-locked-error');
		},
		onFinish : function(){
			var self = this;
			$(window).resize(function(e){
				self.resize();					  
			});	
		}
	});
});
</script>
</body>
</html>
